<template>
  <div>
    <el-form label-width="6vw">
      <el-form-item label="设备编号:" prop="deviceCode">
        <el-select v-model="recipe.deviceCode" placeholder="设备编号">
          <el-option
            v-for="item of deviceList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="配方编号">
        <el-input
          v-model="recipe.recipeNo"
          placeholder="配方编号"
        ></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('editFormula.recipeName')">
        <el-input
          v-model="recipe.recipeName"
          :placeholder="$t('editFormula.recipeName')"
        ></el-input>
      </el-form-item>

      <el-form-item label="产品型号">
        <el-input
          v-model="recipe.productModel"
          placeholder="产品型号"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.customerName')">
        <el-input
          v-model="recipe.customerCode"
          :placeholder="$t('editFormula.customerName')"
        ></el-input>
      </el-form-item>
      <el-form-item label="包装规范">
        <el-input
          v-model="recipe.packingCode"
          placeholder="包装规范"
        ></el-input>
      </el-form-item>
      <el-form-item label="标签规范">
        <el-select v-model="recipe.packingLabelCode" placeholder="标签规范">
          <el-option
            v-for="item of packingLabel"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="封装形式">
        <el-input v-model="recipe.formFactor" placeholder="封装形式"></el-input>
      </el-form-item>
      <el-form-item label="包含合并盘">
        <el-switch
          v-model="recipe.hasReelcombine"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否排序">
        <el-switch
          v-model="recipe.inOrderEnale"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import editStore from "@/store/editStore.js";
import { useI18n } from "vue-i18n";
import { getDevice } from "@/api/recipe";

const { t: $t } = useI18n();
const store = editStore();

let deviceList = ref([]);
let recipe = computed(() => store.recipe);

let packingLabel = computed(() => {
  return Object.keys(store.labelTemplate);
});

async function getDeviceList() {
  try {
    deviceList.value = [];
    let res = await getDevice();
    res?.items.forEach((item) => {
      deviceList.value.push({ label: item.deviceName, value: item.deviceCode });
    });
  } catch (e) {
    ElMessage.error("获取设备信息出错");
  }
}

onMounted(() => {
  getDeviceList();
});
</script>
<style scoped lang="scss">
.globalSetting {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
